<template>
  <div class="order-review-list-item" @click.stop="handleRouteToProduct">
    <van-card class="order-review-list-item-card" :title="review.itemName" :thumb="review.imageUrl">
      <template #desc>
        <div class="review-rating-value">
          <span class="review-rating-value-label">评分</span>
          <van-rate v-model="review.rating" :size="14" void-icon="star" void-color="#eee" readonly/>
        </div>
      </template>
    </van-card>
    <div class="order-review-body">{{ reviewBody }}</div>
    <white-space/>
  </div>
</template>

<script>
import * as _ from "lodash"
import { order } from "@mall/api-services"
import { Card, Rate } from "vant"
import WhiteSpace from "@/components/WhiteSpace"

export default {
  name: "OrderReviewListItem",
  components: {
    WhiteSpace,
    [Card.name]: Card,
    [Rate.name]: Rate,
  },
  props: {
    review: order.OrderReview,
  },
  computed: {
    reviewBody() {
      const { review } = this
      const { body } = review
      return _.isEmpty(body) || _.isUndefined(body) ? "买家未填写评价内容" : body
    },
  },
  methods: {
    handleRouteToProduct() {
      const { review } = this
      this.$router.push(`/products/${review.productId}`)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-review-list-item {
  .order-review-list-item-card {
    background: #fff;

    .van-card__title {
      font-size: 14px;
      margin-bottom: 8px;
    }
  }

  .review-rating-value {
    display: inline-flex;
    align-items: center;
    font-size: 13px;

    .review-rating-value-label {
      margin-right: 6px;
      color: $gray-7;
    }
  }

  .order-review-body {
    padding: 0 8px 8px;
    background: #fff;
  }

}
</style>
